<template>
    <div id="welcome">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>欢迎</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="15">
            <!-- 左边部分 -->
            <el-col :span="12">
                <!-- 用户信息表格 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>用户信息</span>
                        <el-button style="float: right;" @click="getUserInfo" size="normal" type="primary">用户中心</el-button>
                        <el-button
                                @click="getPage('http://gitee.com/marktotop/markboot')"
                                type="primary"
                                plain
                                style="float: right;margin-right: 10px;"
                                size="normal"
                        >获取源码</el-button>
                    </div>
                    <el-tooltip class="item" effect="dark" content="xixixi..." placement="top-start">
                        <el-avatar
                                shape="square"
                                :size="96"
                                :src="userInfo.avatar"
                                style=" position:absolute;left:40px;"
                                :key="1"
                        ></el-avatar>
                    </el-tooltip>
                    <div class="right" style="float:right;width:450px;">
                        <el-table :data="tableInfo" border height="100px">
                            <el-table-column prop="username" label="用户账号"></el-table-column>
                            <el-table-column prop="nickname" label="用户昵称"></el-table-column>
                            <el-table-column prop="department" label="所属部门"></el-table-column>
                            <el-table-column prop="roles" label="用户角色" width="130"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!-- 功能列表 -->
                    <el-row style="margin: 12px 0px;" :gutter="10">
                        <el-card style="height:125px;">
                            <el-col :span="6">
                                <div class="grid-content bg-purple-light">
                                    <router-link to="/system/users">
                                        <img
                                                src="../assets/1.svg"
                                                alt
                                                width="60.8px;"
                                                style="cursor: pointer;margin-left:20px;"
                                        />
                                    </router-link>
                                    <div style="font-size:12px;margin-top:5px;margin-left:25px;">员工管理</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-light">
                                    <router-link to="/system/menus">
                                        <img
                                                src="../assets/2.svg"
                                                alt
                                                width="60.8px;"
                                                style="cursor: pointer;margin-left:20px;"
                                        />
                                    </router-link>
                                    <div style="font-size:12px;margin-top:5px;margin-left:25px;">菜单权限</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-light">
                                    <router-link to="/system/roles">
                                        <img
                                                src="../assets/3.svg"
                                                alt
                                                width="60.8px;"
                                                style="cursor: pointer;margin-left:20px;"
                                        />
                                    </router-link>
                                    <div style="font-size:12px;margin-top:5px;margin-left:25px;">角色管理</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple"></div>
                                <router-link to="/monitor/swagger-ui">
                                    <img
                                            src="../assets/4.svg"
                                            alt
                                            width="60.8px;"
                                            style="cursor: pointer;margin-left:20px;"
                                    />
                                </router-link>
                                <div style="font-size:12px;margin-top:5px;margin-left:25px;">项目接口</div>
                            </el-col>
                        </el-card>
                    </el-row>
                </el-col>
            <el-col :span="12">
                <el-card class="box-card" style="padding:0px;">
                    <!-- 用户登入报表 -->
                    <div id="loginReport" style="width: 550px;height:280px;"></div>
                </el-card>
            </el-col>
        </el-row>
        
        <el-card class="box-card" style="margin-top:5px;padding:0px;">
            <!--music：当前播放的音乐。 autoplay 自动播放 list：播放列表  :mini="true" 迷你模式 showlrc：是否显示歌词 :showLrc="true"-->
            <aplayer :list="audio" :showLrc="true" :music="{
                title:'天空之城',
                artist: '黄叶',
                src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
                pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
                lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
                }"
            > </aplayer>
        </el-card>
        
        <!-- <el-card class="box-card">
               <el-calendar v-model="value"></el-calendar>
        </el-card>-->

        <!-- 用户信息弹出抽屉 -->
        <el-drawer
        title="登录用户信息"
        :visible.sync="drawerVisible"
        :with-header="true">
            <!-- 插入用户信息表单 -->
            <el-form  :model="ActiveUserInfoForm" label-width="100px">
                <!-- 性别标签 -->
                <el-tag class="demo-type" v-if="ActiveUserInfoForm.sex == '0'" type='' effect="dark">男</el-tag>
                <el-tag class="demo-type" v-if="ActiveUserInfoForm.sex == '1'" type="danger" effect="dark">女</el-tag>
                <el-tag class="demo-type" v-if="ActiveUserInfoForm.sex == '2'" type="info" effect="dark">保密</el-tag>
                <!-- 头像区域 -->
                <el-avatar class="avatarImg"
                :src="userInfo.avatar"
                shape="circle"
                :size="120"
                ></el-avatar>
                <el-form-item label="昵称:">
                    <el-input v-model="ActiveUserInfoForm.nickname" style="width: 280px"></el-input>
                </el-form-item>
                <!-- 所属部门 -->
                <el-form-item label="所属部门:" prop="departmentId">
                    <el-select v-model="ActiveUserInfoForm.departmentId" placeholder="请选择所属部门">
                      <el-option
                              v-for="department in departments"
                              :key="department.id"
                              :label="department.name"
                              :value="department.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                <el-form-item label="E-Mail:">
                    <el-input v-model="ActiveUserInfoForm.email" style="width: 280px"></el-input>
                </el-form-item>
                <el-form-item label="手机号:">
                    <el-input v-model="ActiveUserInfoForm.phoneNumber" style="width: 280px"></el-input>
                </el-form-item>
                <el-form-item prop="birth" label="生日">
                    <el-col>
                        <el-date-picker
                                type="date"
                                value-format="yyyy年MM月dd日"
                                placeholder="选择出生日期"
                                v-model="ActiveUserInfoForm.birth"
                                style="width: 280px;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <!-- 操作 -->
                <el-form-item>
                    <el-button type="primary" @click="infoSubmit">确认修改</el-button>
                    <el-button @click="drawerVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
    var echarts = require('echarts');
    import aplayer from "vue-aplayer";
    export default {
        components: {
            //别忘了引入组件
            aplayer: aplayer
        },

        data() {
            return {
                drawerVisible: false,//用户信息抽屉,
                xData: [],
                yData: [],
                myData: [],
                value: new Date(),
                departments: [],
                userInfo: {},
                tableInfo: [],
                ActiveUserInfoForm:{},
                // 音频列表
                audio:  [
                    {
                        title:'天空之城',
                        artist: '黄叶',
                        src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
                        pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
                        lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
                    },
                    {
                        title:'蒲空英的约定',
                        artist: '黄叶',
                        src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
                        pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg" ,
                        Lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
                    },
                    {
                        title:'无畏',
                        artist: '马頔',
                        src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
                        pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
                        Lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词',
                    },
                    {
                        title:'蓝乐',
                        artist: '白纸',
                        src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
                        pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg" ,
                        Lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词',
                    },
                ]
            };
        },
        methods: {
            /**
             * 点击获取源码
             */
            getPage(url) {
                const w = window.open("about:blank");
                w.location.href = url;
            },
            /**
             * 加载登入报表数据
             */
            async loginReport(username) {
                const { data: res } = await this.$http.post("system/loginLog/loginReport", {
                    username: username
                });
                if(!res.success){
                    return this.$message.error("获取登入报表数据失败:" + res.msg);
                } else {
                    const $this = this;
                    this.xData = [];
                    this.yData = [];
                    this.myData = [];
                    res.data.all.forEach(e1 => {
                        $this.xData.push(e1.days);
                        $this.yData.push(e1.count);
                    });

                    for (let i = 0; i < this.xData.length; i++) {
                        let count = 0;
                        for (let j = 0; j < res.data.me.length; j++) {
                            if ($this.xData[i] === res.data.me[j].days) {
                                count = res.data.me[j].count;
                                break;
                            } else {
                                count = 0;
                            }
                        }
                        $this.myData.push(count);
                    }
                }
                this.draw();
            },

            /**
             * 绘制登入报表
             */
            draw() {
                const myChart = echarts.init(document.getElementById("loginReport"));
                // 指定图表的配置项和数据
                const option = {
                    title: {
                        text: "用户登入统计"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: "none"
                            },
                            dataView: {readOnly: false}, //  缩放
                            magicType: {type: ["bar", "line"]}, ///　　折线  直方图切换
                            restore: {}, // 重置
                            saveAsImage: {} // 导出图片
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#eee'
                            }
                        }
                    },
                    legend: {
                        type: 'plain',
                        data: ["全部", "我"],
                    },
                    xAxis: {
                        data: this.xData
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: "全部",
                            data: this.yData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 1500,
                            animationEasing: "cubicInOut",
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255，0.5)'
                            },
                        },
                        {
                            name: "我",
                            data: this.myData,
                            type: "bar",
                            showBackground: true,
                            animationDuration: 2000,
                            animationEasing: "cubicInOut"
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            /**
             * 获取用户信息-》通过userinfo的id
             */
            async getUserInfo(){
                //发起请求
                this.btnLoading = true;
                this.btnDisabled = true;
                const { data: res } = await this.$http.get("system/user/edit/" + this.userInfo.id);
                if(res.success){
                this.ActiveUserInfoForm = res.data;
                // 同时加载 查找所有部门
                await this.getDepartmets();
                this.drawerVisible = true;
                } else {
                    return this.$message.error("用户信息获取失败！");
                }
            },
            /**
             * 加载所有部门
             */
            async getDepartmets() {
                const { data: res } = await this.$http.get("system/department/findAll");
                if(!res.success){
                    return this.$message.error("获取部门列表失败:"+res.data.errorMsg);
                }
                this.departments = res.data;
            },
            /**
             * 修改用户信息
             */
            infoSubmit(){
                this.btnLoading = true;
                this.btnDisabled = true;
                /* 处理请求 */
                console.log("提交用户信息!");
                /* 设置状态 */
                this.drawerVisible = false;
                this.btnLoading = false;
                this.btnDisabled = false;
                
            }
        },

        created() {
            this.userInfo = this.$store.state.userInfo;
            const roles = this.userInfo.isAdmin ? "超级管理员" : this.userInfo.roles;
            this.tableInfo.push({
                username: this.userInfo.username,
                nickname: this.userInfo.nickname,
                department: this.userInfo.department,
                roles: roles
            });
        },
        mounted: function() {
            this.loginReport(this.userInfo.username);
            this.draw();
        },

    };
</script>

<style scoped>
/deep/ :focus {
outline: 0;
}
.demo-type{
 position: absolute;
 top: 80px;
 left: 60px;
}

/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
    overflow: auto;
}
 
/*2.隐藏滚动条，太丑了*/
.el-drawer__container ::-webkit-scrollbar{
    display: none;
}
.avatarImg{
    margin: 10px 170px;
}
</style>
